<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta content="width=100%,initial-scale=1.0,maximum-scale=0.4,user-scalable=no" name="viewport" />
    <title>燕归巢</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            font-family: "microsoft yahei";
        }
        
        #box {
            width: 800px;
            height: 580px;
            margin: 5px auto;
            zoom: 1.2;
        }
        
        #box_top {
            width: 100%;
            height: 50px;
        }
        
        #box_top_left {
            width: 150px;
            height: 50px;
            background: url(img/logo.png);
            background-size: cover;
            float: left;
        }
        
        #box_top_right {
            width: 450px;
            height: 50px;
            float: right;
        }
        
        .top {
            width: 90px;
            height: 30px;
            background: #ffaa00;
            font-size: 15px;
            border-radius: 15px;
            color: #fff;
            text-align: center;
            line-height: 30px;
            float: left;
            margin: 10px;
        }
        
        .top:hover {
            cursor: pointer;
            box-shadow: 0px 0px 5px #ffaa00;
            background: #ffbb00;
        }
        
        #game {
            width: 800px;
            height: 500px;
        }
        
        #story {
            width: 700px;
            height: 400px;
            background: url(img/back.jpg);
            background-size: cover;
            padding: 50px;
            position: relative;
        }
        
        #story_title {
            width: 100%;
            font-size: 26px;
            margin-left: 300px;
            text-align: center;
            margin: 0px auto 10px auto;
        }
        
        #story_sm {
            font-size: 14px;
            color: #777;
            margin-left: 550px;
        }
        
        #story p {
            color: #333;
            font-size: 20px;
            text-indent: 40px;
            padding: 5px 0 5px 0;
        }
        
        #lujing {
            display: none;
        }
        
        #start {
            width: 140px;
            height: 45px;
            border-radius: 30px;
            background: linear-gradient(to left, #b78f51, #854819);
            box-shadow: 0px 0px 10px #222222;
            color: #ddd;
            font-size: 20px;
            text-align: center;
            line-height: 45px;
            position: absolute;
            top: 400px;
            left: 325px;
        }
        
        #start:hover {
            cursor: pointer;
            background: linear-gradient(to left, #ca9d59, #a6591e);
        }
        
        #box_bottom {
            width: 100%;
            height: 30px;
            color: #888888;
            font-size: 12px;
            text-align: right;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="box_top">
            <div id="box_top_left"></div>
            <div id="box_top_right">
                <div class="top" onclick="top1()">故事背景</div>
                <div class="top" onclick="top2()">重头开始</div>
                <div class="top" onclick="top3()">第二关</div>
                <div class="top" onclick="top4()">第三关</div>
            </div>
        </div>
        <div id="game">
            <iframe src="hunter/hunter.html" id="lujing" frameborder="0" width="100%" scrolling="No" height="100%" leftmargin="0" topmargin="0"></iframe>
            <div id="story">
                <div id="story_title">燕 归 巢</div>
                <p>我是一只小燕子，一只无忧无虑遨游在蓝天的小鸟。</p>
                <p>
                    今年春天，我把家安在了一个村庄中，住在一座房子的屋檐上，我在这里过得非常自在。 村庄的附近有许多的同伴，我们一起在远处的森林觅食，可以看到村庄中升起的炊烟。 我们还一起去溪边喝水，回家时，能看见孩子们在土地上嬉戏。那里是一个美好的天堂！
                </p>
                <p>
                    但在这次觅食时，突然出现的猎人抓走了我许多的同伴，就在刚刚我也被抓住了！ 我们被一起装在袋子里，被他们带到了森林的另一端。现在我不能高高地飞翔了！ 我想趁着他们睡觉的时候逃回村庄，但他们现在已经发现了我，请帮我打跑这些猎人吧！！！
                </p>
                <span id="story_sm">本故事纯属虚构</span>
                <div id="start" onclick="top2()">开始游戏</div>
            </div>

        </div>
        <div id="box_bottom">
            制作人：谢成龙 &emsp; 联系电话：15104108260
        </div>
    </div>

</body>
<script type="text/javascript">
    var game = document.getElementById("game");
    var story = document.getElementById("story");
    var lujing = document.getElementById("lujing")


    function top1() {
        story.style.display = "block";
        lujing.style.display = "none";
    }

    function top2() {
        story.style.display = "none";
        lujing.style.display = "block";
        lujing.src = "hunter/hunter.html";
    }

    function top3() {
        story.style.display = "none";
        lujing.style.display = "block";
        lujing.src = "fly/fly.html";
    }

    function top4() {
        story.style.display = "none";
        lujing.style.display = "block";
        lujing.src = "Rocksfall/Rocksfall.html";
    }
</script>

</html>